WEEK 1.a: Pinciples and practices
A couple of ideas for the final project:
1.1. Indor climate advisor
The idea is to make a device that allows you to control the indoor air quality of your home, and can tell you what to do if you have a poor air quality. For instance, it can tells you if you need to open or close the window, or turn off your heating, in order to improve the air quality of your home.
Sketch:
Examples:
1.2. Soap film machine
It consists in a climatic chamber where soap film models can be preserved for longer, in order to analise them
Inside, it has a soapy-water bucket where the thread model is submerged, and when extracted we obtain the model
Sketch:
Examples of the "soap-film machine" made by the German architect Frei Otto:
WEEK 1.b: Project Management
I'm going to explain step by step how I setted up GIT and how I built my website
2.1. GIT
First of all, I downloaded Git from here
After installing it, I used Git Bash mainly to do everything.
The first step to congigure Git is to add my username with:
git config --global user.name "your_username"
Then, I added my email with:
git config --global user.email "your_email@mail.com"
Next step is to generate a SSH key with:
ssh-keygen -t rsa -C "your_email@mail.com"
Now we can see it with:
cat ~/.ssh/id_rsa.pub
Once I had the key, I went to the remote repository in Gitlab and pasted it in the SSH keys section
After that I cloned the remote repository in local, as I already had one created in Gitlab. To do that, I created a local folder where I wanted to put my repo.
Then I cloned it by copying the SSH url from remote, and then doing:
git clone git@gitlab.com:MDEF/2020/documentation-template.git
At this point, everything is setted up to start making changes
The commands I used were:
To add everything:
git add .
To add a file:
git add "file"
To commit:
git commit -m "comment"
To push:
git push
To pull:
git pull
To see the status of the updates in the remote repository versus the local one:
git status
To se what's inside a folder:
git ls
To see a list of possible commands:
git help
2.2. Building my personal site
To build my personal site, I decided to do it in HTML from scratch, in order to learn it better
I used Atom as a text editor to write the code
To begin, I decided the look or design I wanted to have in my website, and then I started working towards that direction
I followed some tutorials and used some code from https://www.w3schools.com wich is a really interesting website to learn HTML
I used a external stylesheet stored in a CSS file, in order to control de layout of all the pages at the same time.
For instance, I set up the different headders, with their font family, size or color:
h1 {
color: #494949;
text-align: center;
font-family: Segoe UI;
font-weight: normal;
font-size: 30px;
padding-top: 30px;
padding-bottom: 30px;
}
h2 {
color: #494949;
text-align: center;
font-family: Segoe UI;
font-weight: normal;
font-size: 26px;
padding-bottom: 30px;
padding-top: 20px;
}
Or the styles for regular paragraphs or lists:
p {
font-family: Segoe UI;
font-size: 18px;
font-style: normal;
font-weight: lighter;
color: #757575;
text-align: justify;
line-height: 25px;
margin-bottom: 30px;
}
ul {
font-family: Segoe UI;
font-size: 18px;
font-style: normal;
font-weight: lighter;
color: #757575;
text-align: left;
line-height: 25px;
margin-bottom: 30px;
}
ol {
font-family: Segoe UI;
font-size: 18px;
font-style: normal;
font-weight: lighter;
color: #757575;
text-align: left;
line-height: 25px;
margin-top: -15px;
margin-bottom: 30px;
}
I downloaded some ready-made chunks of code to make some operations easier. For example, the CSS code for the navigation bar:
/*NAVIGATION BAR*/
/* Add a black background color to the top navigation */
.topnav {
background-color: transparent;
overflow: hidden;
font-family: Helvetica;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #757575;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 14px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: transparent;
color: black;
}
/* Add an active class to highlight the current page */
.topnav a.active {
background-color: transparent;
color: black;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
color: #757575;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
And the code for the responsive grid of images:
/* ROWS AND COLUMNS */
* {
box-sizing: border-box;
}
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 40px;
}
/* Create four equal columns that sits next to each other */
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 25%;
padding: 0 20px;
}
.column img {
margin-top: 30px;
margin-bottom: 30px;
vertical-align: middle;
width: 100%;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
/* Fading images */
.container {
position: relative;
width: 100%;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: transparent;
color: black;
font-size: 16px;
font-family: Helvetica;
}
Then, in each page, the html gets easier, as it only needs to reference to the CSS stylesheet with:
<link rel="stylesheet" href="../../styles.css">
So, for example, the adaptative grid of images is made with:
<div class="row">
<div class="column">
<div class="container"><a href="fabacademy\week1\week1.html"><img src="logos/week1.jpg" alt="week1" class="image" style="width:100%"></a>
<div class="middle"><div class="text">week 1: principles and practices & project management</div></div>
</div>
</div>
<div class="column">
<div class="container"><a href="fabacademy\week2\week2.html"><img src="logos/week2.jpg" alt="week2" class="image" style="width:100%"></a>
<div class="middle"><div class="text">week 2: computer-aided design</div></div>
</div>
</div>
<div class="column">
<div class="container"><a href="fabacademy\week3\week3.html"><img src="logos/week3.jpg" alt="week3" class="image" style="width:100%"></a>
<div class="middle"><div class="text">week 3: computer-controlled cutting</div></div>
</div>
</div>
<div class="column">
<div class="container"><a href="fabacademy\week4\week4.html"><img src="logos/week4.jpg" alt="week4" class="image" style="width:100%"></a>
<div class="middle"><div class="text">week 4: electronics production</div></div>
</div>
</div>
</div>
And it adapts to the width of the browser:
And the navigation bar with:
<div class="topnav" id="myTopnav">
<a href="../../index.html">Diego Diaz Gomez</a>
<a href="../../about.html">About</a>
<a href="../../fabacademy.html" class="active">Fab Academy</a>
<a href="../../contact.html">Contact</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars">
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
Looking like:
Other common html tags used are the headders:
<h2>2.2. Building my personal site</h2>
The regular paragraph one:
<p>To build my personal site, I decided to do it in HTML from scratch, in order to learn it better</p>
Or the one for images:
<img src="images/screenshot5.jpg" alt="Responsive grid of images" class="responsive" width="600px">